<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../vue@3.2.23.js"></script>
	</head>
	<body>
		<div id="app">
			<div class="message">{{message}}</div>
			<counter></counter>
			<numbut></numbut>
			<numbut></numbut>
			<numbut></numbut>
			<hr>
			<Counter></Counter>
			<Message></Message>
		</div>
	</body>
</html>
<script>
	// 什么是组件：复杂事情简单化，是一种封装起来的，具有独立功能的单元 (对象)
	// 怎么创建组件：1.全局组件，2：局部组件
	const {createApp} = Vue;

	// 局部组件
	const Counter = {
		data(){
			return{
				count:5
			}
		},
		template:`<div @click="count++">{{count}}</div>`
	}
	const Message = {
		// 注册组件
		components:{
			Counter
		},
		data(){
			return{
				message:"Message我是提示的信息哦---------"
			}
		},
		template:`<div>{{message}}</div>`
	};
	const TipInfo = {
		template:`<div>提示信息TipInfo</div>`
	}
	
	const app = createApp({
		components:{
			// 'tipinfo':TipInfo vue底层映射，不写TipInfo会映射为tip-info
			Counter,Message,'tipinfo':TipInfo
		},
		data(){
			return{
				message:'提示信息',
				sum:20
			}
		}
	})
	
	
	// 创建全局组件
	app.component('counter',{
		data(){
			return{
				count:0,
			}
		},
		template:`<div>{{count}}</div>`
	});
	app.component('numbut',{
		data(){
			return{
				count:1,
			}
		},
		template:`<div @click="count++">{{count}}</div>`
	});
	
	// 加载组件到模板
	const vm = app.mount('#app');
</script>
